<template>
  <div class="header">
    <div class="line"></div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#B3C0D1"
      text-color="#fff"
      active-text-color="#69B1A2"
      style="font-weight: 700"
    >
      <span
        style="float: left; font-size: 30px; color: #69b1a2; cursor: pointer"
        @click="gohome"
        >关关音乐馆</span
      >
      <el-menu-item index="1">发现音乐</el-menu-item>
      <el-menu-item index="2">我的音乐</el-menu-item>
      <el-menu-item index="3">音乐人</el-menu-item>
      <el-menu-item index="4">关注</el-menu-item>
      <span>
        <div class="searchBar">
          <el-input
            placeholder="请输入内容"
            v-model="searchkey"
            class="input-with-select"
          >
            <el-select
              v-model="select"
              slot="prepend"
              placeholder="歌曲"
              style="width: 100px"
            >
              <el-option label="歌曲" value="1"></el-option>
              <el-option label="MV" value="2"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchIfo"
              :disabled="canSreach"
            ></el-button>
          </el-input>
        </div>
      </span>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ nickname }}
          <el-avatar
            :src="avatarSrc"
            style="vertical-align: middle"
            v-if="islogin"
          ></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown" v-if="islogin">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
        <el-dropdown-menu slot="dropdown" v-else>
          <el-dropdown-item><span @click="login">登录</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
  </div>
</template>

<script>
import { login } from "../../api/user";
import { searchforuser } from "../../api/toolsApi";
import { setToken } from "../../utils/auth";
export default {
  data() {
    return {
      searchkey: "",
      select: "1",
      islogin: false,
      userifo: {},
      nickname: "未登录",
      avatarSrc: "",
      canSreach: true,
    };
  },
  computed: {},
  watch: {
    searchkey: function () {
      if (this.searchkey) {
        this.canSreach = false;
      } else {
        this.canSreach = true;
      }
    },
  },

  methods: {
    handleSelect() {},
    // 返回主页
    gohome() {
      if (this.$route.path == "/home") {
        this.$router.go(0);
      } else {
        this.$router.push("/home");
      }
    },
    // 搜索
    async searchIfo() {
      if (this.select == "1") {
        const result = await searchforuser({
          keywords: this.searchkey,
          type: 1,
        });
        this.$store.commit("Publiccomponent/submitSearch", result.result.songs);
        if (this.$route.path.startsWith("/home/search")) {
        } else {
          this.$router.push("/home/search/1");
        }
      } else {
        const result = await searchforuser({
          keywords: this.searchkey,
          type: 1004,
        });
        this.$store.commit("Publiccomponent/submitSearch", result.result.mvs);
        this.$router.push("/home/search/2");
      }
      this.searchkey = "";
    },
    // 登录
    async login() {
      const result = await login({
        phone: 15946544269,
        password: "15845434289",
      });
      this.userifo = result.profile;
      this.nickname = result.profile.nickname;
      this.avatarSrc = result.profile.avatarUrl;
      console.log(result);
      localStorage.setItem("token", result.cookie);
      setToken(result.cookie);
      this.islogin = true;
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.searchBar {
  margin-left: 50px;
  width: 600px;
  float: left;
}
</style>
